<template>
  <div class="theme">
    <div class="column">
      <visuali ref="qing1"></visuali>
      <visuali ref="qing2"></visuali>
      <visuali ref="qing3"></visuali>
    </div>
    <div class="column">
      <middle></middle>
      <naps></naps>
    </div>
    <div class="column">
      <visuali ref="qing4"></visuali>
      <visuali ref="qing5"></visuali>
      <visuali ref="qing6"></visuali>
    </div>
  </div>
</template>

<script>
import Visuali from '../../../components/visuali/Visuali.vue'
import Middle from '../../../components/middles/Middles.vue'
import Naps from '../../../components/naps/Naps.vue'
import { echarts1, echarts2, echarts3, echarts4, echarts5, echarts6 } from '../../../assets/js/echartsi'
export default {
  name: 'HomeTheme',
  components: {
    Visuali,
    Middle,
    Naps
  },
  mounted() {
    echarts1(this.$refs.qing1._vnode.children[2].elm)
    echarts2(this.$refs.qing2._vnode.children[2].elm)
    echarts3(this.$refs.qing3._vnode.children[2].elm)
    echarts4(this.$refs.qing4._vnode.children[2].elm)
    echarts5(this.$refs.qing5._vnode.children[2].elm)
    echarts6(this.$refs.qing6._vnode.children[2].elm)
  }
}
</script>

<style lang="scss" scoped>
.theme {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.125rem 0.125rem 0;

  .column {
    flex: 3;
    &:nth-child(2) {
      flex: 5;
      margin: 0 0.125rem 0.1875rem;
    }
  }
}
</style>